﻿<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="标题" prop="Title">
              <a-input :disabled="disabled" v-model="entity.Title" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="审批级数">
              <a-input-number disabled v-model="entity.Level" autocomplete="off" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="关联表单">
              <a-input-number v-model="entity.Form" autocomplete="off" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="数据明细">
            <a-table
              ref="table"
              :columns="columns"
              :rowKey="(row, index) => index"
              :dataSource="data"
              :pagination="pagination"
              :loading="loading"
              @change="handleTableChange"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
              :bordered="true"
              size="small"
            >
              <span slot="operation" slot-scope="text, record">
                <template>
                  <a @click="handleDelete([record.Id])">删除</a>
                </template>
              </span>

              <template slot="StartState" slot-scope="text, record, index">
                <a-input size="small" class="input" v-model="record.StartState"></a-input>
              </template>

              <template slot="Action" slot-scope="text, record, index">
                <a-input size="small" class="input" v-model="record.Action"></a-input>
              </template>
              <template slot="ToState" slot-scope="text, record, index">
                <div>
                  <a-input size="small" class="input" v-model="record.ToState"></a-input>
                </div>
              </template>
              <template slot="Department" slot-scope="text, record, index">
                <a-tree-select
                  @change="Department($event)"
                  v-model="record.DeptId"
                  allowClear
                  :treeData="DepartmentIdTreeData"
                  placeholder="请先选择组织机构"
                  treeDefaultExpandAll
                ></a-tree-select>
              </template>
              <template slot="User" slot-scope="text, record, index">
                <a-select v-model="record.User">
                  <a-select-option v-for="item in List" :key="item.Id" :value="item.Id">
                    {{ item.RealName }}
                  </a-select-option>
                </a-select>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>

        <div style="margin-top: 50px"></div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button type="primary" @click="addtable" style="margin-right: 10px"> 添加数据 </a-button>
          <a-button @click="close" :style="{ marginRight: '8px' }">取消</a-button>
          <a-button type="primary" @click="handleSubmit">保存</a-button>
        </div>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>
<script>
// {
//   title: '推送角色',
//   dataIndex: 'Assignees',
//   ellipsis: true,
//   scopedSlots: { customRender: 'Requirement' }
// },
export default {
  props: {
    parentObj: Object,
    disabled: { type: Boolean }
  },
  data () {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'aId',
          customRender: (text, row, index) => {
            return index + 1
          },
          width: '50px'
        },
        { title: '本级操作提示', dataIndex: 'StartState', ellipsis: true, scopedSlots: { customRender: 'StartState' } },
        { title: '按钮名称', dataIndex: 'Action', ellipsis: true, scopedSlots: { customRender: 'Action' } },
        { title: '推送下级消息提示', dataIndex: 'ToState', scopedSlots: { customRender: 'ToState' } },
        {
          title: '推送组织机构',
          dataIndex: 'DeptId',
          ellipsis: true,
          scopedSlots: { customRender: 'Department' }
        },

        {
          title: '推送人员',
          dataIndex: 'User',
          ellipsis: true,
          scopedSlots: { customRender: 'User' }
        },

        {
          title: '操作',
          dataIndex: 'operation',
          width: '70px',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      List: [],
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'desc' },
      queryParam: {},
      selectedRowKeys: [],
      rules: {
        Title: [{ required: true, message: '未输入', trigger: 'blur' }],
        Level: [{ required: true, message: '未输入', trigger: 'blur' }],
        Type: [{ required: true, message: '未输入', trigger: 'blur' }]
      },

      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      FlowProcess: [],
      addtableFlag: 0,
      visible: false,
      loading: false,
      entity: {},
      DepartmentIdTreeData: [],
      title: '',
      StartState: '',
      Action: '',
      ToState: '',
      Assignees: ''
    }
  },

  watch: {
    data: {
      handler (n, o) {
        // console.log(n)
        this.entity.Level = n.length
      },
      deep: true,
      immediate: true
    },

    FlowProcess (n, o) {
      this.$set(this.entity, 'Level', n.length)
    }
  },
  methods: {
    close () {
      this.visible = false
    },
    // 选中组织机构获取人员
    Department (e) {
      // console.log(e)
      // console.log(123)

      this.UserList(e)
    },
    UserList (e) {
      this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
        if (resJson.Success) {
          this.List = resJson.Data
        }
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }

      // this.getDataList()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // 添加
    addtable () {
      this.data.push({
        StartState: '',
        Action: '',
        ToState: '',
        User: ''
      })
    },

    init () {
      this.visible = true
      this.entity = {}
      this.data = []
      this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.DepartmentIdTreeData = resJson.Data
        }
      })
    },
    openForm (title, id) {
      this.init()
      this.title = title
      if (id) {
        this.loading = true

        this.$http.post('/FP/Base_OverFlow/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
          // console.log(resJson.Data)
          this.FlowProcess = JSON.parse(resJson.Data.Content)
          if (this.FlowProcess) {
            this.FlowProcess = this.FlowProcess.map(item => {
              return {
                Id: item.Id,
                Action: item.Action.Name,
                StartState: item.StartState.Name,
                ToState: item.ToState.Name,
                Rule: item.Assignees.RoleId,
                User: item.Assignees.UserId,
                DeptId: item.ToDept.Id,
                RenYuanList: item.RenYuanList,
                UserPosts: item.UserPosts ? item.UserPosts.UserPosts : ''
              }
            })
          } else {

          }
          // console.log(this.FlowProcess)
          // console.log(resJson)
        })
      }
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }

        this.loading = true
        var entityData = this.entity
        entityData.FlowProcess = this.FlowProcess
        // console.log(entityData)
        this.$http.post('/FP/Base_OverFlow/SaveData', entityData).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.FlowProcess = []
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
